import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import React, { useState, useCallback, useEffect } from 'react';
import { useRequest } from '@umijs/hooks';
import { Button, Input, Select, InputNumber } from 'antd';
import styles from './index.less';
import moment from 'moment';

import { Const } from '../../Const';

const FormItem = Form.Item;
const { TextArea } = Input;
const { Option } = Select;

const Setp3= props => {

  const { prevStep, nextStep, className, form, selectCityData, ownerType, itemData, userServiceCity } = props;

  // 下一步
  const step3NextStep = useCallback(() => {
    form.validateFields((err, fieldsValue) => {
      if (err) return;
      console.log(fieldsValue, 'fieldsValue');
      nextStep(fieldsValue);
    })
  }, [form]);

  return (
    <div className={`${styles.stepWrapper} ${className}`}>
      <div className={styles.stepContent}>
        <FormItem {...Const.formLayout} label="联系方式1">
          {form.getFieldDecorator('recipientPhoneFirst', {
            rules: [
              { required: true, message: '请输入联系方式' },
              { pattern: Const.phoneMobileReg, message: '请输入正确的格式'}
            ],
            initialValue: itemData.recipientPhoneFirst || ''
          })(
            <Input placeholder="请输入" maxLength={11} />
          )}
        </FormItem>
        <FormItem {...Const.formLayout} label="联系方式2">
          {form.getFieldDecorator('recipientPhoneSecond', {
            rules: [
              { pattern: Const.phoneMobileReg, message: '请输入正确的格式'}
            ],
            initialValue: itemData.recipientPhoneSecond || ''
          })(
            <Input placeholder="请输入" maxLength={11} />
          )}
        </FormItem>
        <FormItem {...Const.formLayout} label="收件人姓名">
          {form.getFieldDecorator('expressRecipient', {
            rules: [],
            initialValue: itemData.expressRecipient || ''
          })(
            <Input placeholder="请输入" maxLength={20} />
          )}
        </FormItem>
        <FormItem {...Const.formLayout} label="收件地址">
          {form.getFieldDecorator('recipientAddress', {
            rules: [],
            initialValue: itemData.recipientAddress || ''
          })(
            <TextArea autoSize={{ minRows: 3, maxRows: 3 }} placeholder="请输入" maxLength={50} />
          )}
        </FormItem>
        <FormItem {...Const.formLayout} label="服务航站">
          {form.getFieldDecorator('serviceCity', {
            rules: [
              { required: true, message: '请选择服务航站' }
            ],
            initialValue: itemData.serviceCity || userServiceCity || ''
          })(
            <Select
              allowClear
              showSearch
              placeholder="请选择"
              style={{ width: '100%' }}
              optionFilterProp="children"
            >
              {selectCityData.map(({ CITYNAME, CITY3CODE }) => <Option key={CITY3CODE} value={CITY3CODE}>{CITYNAME}-{CITY3CODE}</Option>)}
            </Select>
          )}
        </FormItem>
        {(ownerType === 2 || ownerType === 6) && <FormItem {...Const.formLayout} label="少收类型">
          {form.getFieldDecorator('littlePkgType', {
            rules: [
              { required: true, message: '请选择少收类型' }
            ],
            initialValue: itemData.littlePkgType || '常规'
          })(
            <Select
              onChange={val => {
                if (val === '常规') {
                  form.setFieldsValue({
                    remindDay: 21
                  })
                } else {
                  form.setFieldsValue({
                    remindDay: ''
                  })
                }
              }}
              style={{ width: '100%' }}>
              {Const.littlePkgTypeList.map((item, index) => <Option key={index} value={item.value}>{item.label}</Option>)}
            </Select>
          )}
        </FormItem>}
        {(ownerType === 2 || ownerType === 6) && <FormItem {...Const.formLayout} label="事故提醒">
          {form.getFieldDecorator('remindDay', {
            rules: [
              { required: true, message: '请输入事故提醒' },
              { pattern: /^[0-9]*$/, message: '请输入数字' }
            ],
            initialValue: itemData.remindDay || 21,
          })(
            <Input
              disabled={form.getFieldValue('littlePkgType') === '常规'}
              suffix={
                <span>天(自然日)</span>
              }
              maxLength={2}
              placeholder="请输入" />
          )}
        </FormItem>}
      </div>
      <div className={styles.btnBox}>
        <Button onClick={prevStep} style={{ marginRight: '10px' }}>上一步</Button>
        <Button type="primary" onClick={step3NextStep}>提交</Button>
      </div>
    </div>
  )
}

export default Form.create()(Setp3);
